<template>
    <div>
        <div class="itemMusicTop">
            <img :src="playlist.coverImgUrl" alt="" class="bgimg">
            <div class="itemLeft">
                <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <span>歌单</span>
            </div>
            <div class="itemRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-31liebiao"></use>
                </svg>
            </div>
        </div>
        <div class="itemMusicCenter" v-if="playlist.creator">
            <img :src="playlist.coverImgUrl" alt="" class="imgLeft"/>
            <span class="playCount">
                <svg class="playicon" aria-hidden="true">
                    <use xlink:href="#icon-icon-24gl-play-copy"></use>
                </svg>
                {{changeCount(playlist.playCount)}}
            </span>
            <div class="centerRight">
                <div class="description">{{playlist.name}}</div>
                <div class="creatorInfo">
                    <img :src="playlist.creator.avatarUrl" alt="" class="headicon"/>
                    <span class="nickname">{{playlist.creator.nickname}}</span>
                    <svg class="iconyou" aria-hidden="true">
                        <use xlink:href="#icon-youjiantou"></use>
                    </svg> 
                </div>
                <div class="signature">{{playlist.description}}</div>
            </div>
        </div>
        <div class="itemMusicBottom">
            <div class="iconItem">
                <svg class="bottomIcon" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <span>{{playlist.commentCount}}</span>
            </div>
            <div class="iconItem">
                <svg class="bottomIcon" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <span>{{playlist.shareCount}}</span>
            </div>
            <div class="iconItem">
                <svg class="bottomIcon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
                </svg>
                <span>下载</span>
            </div>
            <div class="iconItem">
                <svg class="bottomIcon" aria-hidden="true">
                    <use xlink:href="#icon-show_duoxuan"></use>
                </svg>
                <span>多选</span>
            </div>
        </div>
    </div>
    
</template>
<script>
export default{
    setup(props){
        console.log(props);
        //通过props进行传值，判断如果数据拿不到，就获取sessionStorage
        if(props.playlist.creator==''){
            props.playlist.creator=JSON.parse(sessionStorage.getItem('itemDetail').playlist).creator;
        }
        function changeCount(num){
            if(num>100000000){
                return (num/100000000).toFixed(1)+'亿'
            }else if(num>=10000){
                return (num/10000).toFixed(1)+'万'
            }
        }
        return {changeCount};
    },
    props:['playlist']
}
</script>
<style lang="less" scoped>
.itemMusicTop{
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem;
    position: relative;
    .itemLeft,.itemRight{
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 .2rem;
        span{
            font-size: 0.4rem;
            color: #fff;
        }
        .icon{
            fill: #fff;
        }
    }
    .bgimg{
        width: 100%;
        height: 8.4rem;
        position: fixed;
        z-index: -1;
        filter: blur(30px);
    }
    
}
.itemMusicCenter{
    display: flex;
    padding: 0.2rem;
    .imgLeft{
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 8px;
        position: relative;
    }
    .playCount{
        position: absolute;
        top: 1.26rem;
        left:1.06rem;
        color: #fff;
        display: flex;
        align-items: center;
        .playicon{
            width: .4rem;
            height: .4rem;
        }
    }
    .centerRight{
        margin-left: .2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 2.6rem;
        overflow: hidden;
        .description{
            color: #fff;
            font-weight: 800;
            font-size: .32rem;
            // height: 34%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //第几行
            -webkit-box-orient: vertical;
        }
        .creatorInfo{
            display: flex;
            align-items: center;
            // height: 33%;
            .headicon{
                width: 28px;
                height: 28px;
                border-radius: 50%;
            }
            .nickname{
                margin-left: .2rem;
                color: rgb(187, 186, 186);
                font-size: .3rem;
            }
            .iconyou{
                width: .3rem;
                height: .3rem;
                fill: rgb(187, 186, 186);
            }
        }
         .signature{
            font-size: .26rem;
            color: rgb(206, 205, 205);
            // height: 31%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //第几行
            -webkit-box-orient: vertical;
        }
    }
}
.itemMusicBottom{
    width: 100%;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    .iconItem{
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .bottomIcon{
            width: .5rem;
            height: .5rem;
            fill: #fff;
            margin-bottom: .1rem;
        }
    }
}

</style>